<template>
    <div>
      <el-tabs type="border-card" class="tabs">
      <el-tab-pane label="分厂月红黄绿灯分析" lazy=lazy>
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <h1>分厂月红黄绿灯分析</h1>
              <left-table></left-table>
            </div>
            </el-col>
          <el-col :span="8">
            <wft-charts :chartId="myChart1"></wft-charts>
            <wft-charts :chartId="myChart2"></wft-charts>
          </el-col>
          <el-col :span="8">
            <wft-charts :chartId="myChart3"></wft-charts>
            <wft-charts :chartId="myChart4"></wft-charts>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="分厂月疵点分析" lazy=lazy>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <h1>分厂月红黄绿灯分析</h1>
              <left-table></left-table>
            </div>
            </el-col>
          <el-col :span="12">
            <right-pie :chartId="myChart5"></right-pie>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="集团月疵点分析" lazy=lazy>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <h1>分厂月红黄绿灯分析</h1>
              <left-table></left-table>
            </div>
            </el-col>
          <el-col :span="12">
            <right-pie :chartId="myChart6"></right-pie>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <div>{{this.tableList}}</div>
    </div>
</template>

<script>
import LeftTable from './charts/LeftTable.vue'
import WftCharts from './charts/WFT.vue'
import RightPie from './charts/RightPie.vue'
import { mapState } from 'vuex'
export default {
  name: 'CommonTabs',
  components: {
    LeftTable,
    WftCharts,
    RightPie
  },
  data () {
    return {
      lazy: true,
      myChart1: 'myChart1',
      myChart2: 'myChart2',
      myChart3: 'myChart3',
      myChart4: 'myChart4',
      myChart5: 'myChart5',
      myChart6: 'myChart6',
      list: []
    }
  },
  computed: {
    ...mapState(['tableList'])
  },
  methods: {
    showInfo () {
    }
  },
  mounted () {
    this.showInfo()
  }
}
</script>

<style lang="stylus" scoped>
.tabs
  margin-top: 15px
  h1
    margin: 15px 0px
</style>
